<template>
    <div ref="charts" style="width:100%;height:100%;margin: 10px"></div>
</template>

<script>
    import ME from '../../../controllers/home'
    import echarts from 'echarts'

    let chart;
    export default {

        name: "line-charts",
        data() {
            return {
                xAxis: [],
                values: [],
                option: {},
            }
        },
        mounted() {
            this.initXData()
            chart = echarts.init(this.$refs['charts'])
            this.option = {
                title: {
                    text: '今日人流量分布',
                    subtext:'数据来自于监控相机（每小时更新）'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.xAxis
                    // data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisPointer: {
                        snap: true
                    }
                },
                series: [
                    {
                        name: '人流量',
                        type: 'line',
                        // smooth: true,
                        // data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                        data: this.values
                    }
                ]
            }


            chart.setOption(this.option)
            window.addEventListener('resize', () => {
                chart.resize()
            })

            this.loadData()

        },
        methods: {
            loadData() {
                ME.getTraffic().then(json => {
                    if (json.code == 0) {
                        let data = json.data;
                        let series =[]
                        for(let item of data.series.user){
                            series.push({
                                name:`${item.name}(${item.unit})`,
                                type:'line',
                                data:item.value
                            })
                        }
                        if(series.length > 0){
                            let size = series[0].data.length
                            let time = (size -1) + ":00"
                            if(size < data.xAxis.length){
                                series.push({
                                    type:'line',
                                    markLine:{
                                        lineStyle: {
                                            normal: {
                                                type: 'solid'
                                            }
                                        },
                                        data:[
                                            {
                                                xAxis:time
                                            }
                                        ],
                                        animationDuration:500,
                                        symbol:"none"
                                    }
                                })
                            }
                            chart.setOption({
                                xAxis: {
                                    data: data.xAxis
                                },
                                series: series,
                                title: {
                                    text: '今日人流量分布',
                                    subtext:'数据来自于监控相机（每小时更新，下次更新时间' + time + '）'
                                },
                            })
                        }else{
                            chart.setOption({
                                xAxis: {
                                    data: data.xAxis
                                },
                                series: series,
                            })
                        }


                    }
                })
            },
            initXData() {
                for (let i = 0; i < 10; i++) {
                    this.xAxis.push("0" + i + ":00")
                }
                for (let i = 10; i < 24; i++) {
                    this.xAxis.push(i + ":00")
                }
                this.xAxis.push('23:59')
            },
        }
    }
</script>

<style scoped>

</style>